<template>
  <div class="propo-box" v-if="show">
    <el-carousel class="swiper-height">
      <el-carousel-item>
        <div class="propo-list">
          <div class="propo-list-pie">
            <div class="pie-title">
              <img src="../../assets/img/gisPage/echarts-pie-logo.png" alt="" />
              <span class="echarts-name">选中项目户型占比</span>
            </div>
            <div class="pie-main" @click="fullSc('pie', priceTrendData)">
              <pie class="echarts-height" :housingSupplyStatsData="priceTrendData" v-if="priceTrendData.seriesData.length > 0"></pie>
            </div>
          </div>
          <div class="propo-list-pie">
            <div class="pie-title">
              <img src="../../assets/img/gisPage/echarts-pie-logo.png" alt="" />
              <span class="echarts-name">选中项目开发商占比</span>
            </div>
            <div class="pie-main" @click="fullSc('pie', priceTrendData1)">
              <pie class="echarts-height" :housingSupplyStatsData="priceTrendData1" v-if="priceTrendData1.seriesData.length > 0"></pie>
            </div>
          </div>
        </div>
      </el-carousel-item>
      <el-carousel-item>
        <div class="propo-list">
          <div class="propo-list-pie">
            <div class="pie-title">
              <img src="../../assets/img/gisPage/echarts-pie-logo.png" alt="" />
              <span class="echarts-name">选中项目房型占比</span>
            </div>
            <div class="pie-main" @click="fullSc('pie', priceTrendData2)">
              <pie class="echarts-height" :housingSupplyStatsData="priceTrendData2" v-if="priceTrendData2.seriesData.length > 0"></pie>
            </div>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
    <el-dialog custom-class="magnify-dialig" v-model="magnifyData.dialogVisible" :width="magnifyData.dialogWidth" :top="magnifyData.dialogTop" :append-to-body="true">
      <component
        v-if="magnifyData.dialogVisible"
        ref="dialogRef"
        :is="magnifyData.componentName"
        :dialogData="{
          fontSizeTimes: 2
        }"
        v-bind="{...magnifyData.props}"
      ></component>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import pie from "./pie.vue";
export default {
  components: { pie },
};
</script>
<script setup lang="ts">
import { ref, reactive, toRefs, onMounted } from "vue";
import busEmitter from "@/utils/bus";
const show = ref(false);

const priceTrendData = ref({
  seriesData: [],
});
const priceTrendData1 = ref({
  seriesData: [],
});
const priceTrendData2 = ref({
  seriesData: [],
});

const magnifyData = ref({ // chart图放大data
  dialogVisible: false,
  componentName: '',
  componentParams: {},
  dialogWidth: '',
  props: {},
  dialogTop: '',
})

// 房屋成交走势
const priceTrend = (data, num) => {
  let echartParams = {
    gridStyle: {
      show: true,
    },
    legendStyle: {
      show: true,
      icon: "rect",
      left: "center", // 设置图例居中
      top: 1,
      bottom: 0,
      right: 0,
      itemWidth: 8,
      itemHeight: 8,
      itemGap: 3,
    },
    seriesStyle: {
      radius: [35, 55],
      center: ["55%", "65%"],
      itemStyle: {
        borderRadius: 0,
        borderWidth: 0,
      },
      label: {
        show: false,
        position: "center",
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 18,
          fontWeight: "bold",
        },
      },
      labelLine: {
        show: false,
      },
    },
    seriesData: [data],
  };
  if (num == 1) {
    priceTrendData.value = echartParams;
  }
  if (num == 2) {
    priceTrendData1.value = echartParams;
  }
  if (num == 3) {
    priceTrendData2.value = echartParams;
  }
};
busEmitter.on("getpieEchart", (data) => {
  if (data == 2) {
    show.value = false;
  } else {
    show.value = true;
    setTimeout(() => {
      priceTrend(data.hxzbList, 1);
      priceTrend(data.kfsList, 2);
      priceTrend(data.lxList, 3);
    }, 100);
  }
});

const fullSc = (componentName, componentParams) => { // 放大chart图
  magnifyData.value.dialogTop = '25vh';
  magnifyData.value.dialogVisible = true;
  magnifyData.value.componentName = componentName;
  switch (componentName) {
    case 'pie': // 单折线图
      magnifyData.value.props = {
        housingSupplyStatsData: componentParams,
        class: 'h173 dialog-h173'
      };
      magnifyData.value.dialogWidth = '50%';
      magnifyData.value.dialogTop = '20vh';
      break;
  }
};
</script>

<style scoped lang="less">
.echarts-height {
  height: 173px;
}

.swiper-height {
  height: 206px;
}
.propo-box {
  position: fixed;
  top: 831px;
  right: 54px;
  width: 376px;
  height: 206px;
  background: linear-gradient(180deg, rgba(71, 121, 185, 0.85) 0%, rgba(10, 65, 118, 0.6) 100%);
  padding: 7px 12px;

  .propo-list {
    display: flex;
    justify-content: space-between;

    .propo-list-pie {
      width: 170px;

      .pie-title {
        display: flex;
        align-items: center;

        img {
          width: 16px;
          height: 16px;
          position: relative;
          top: 1px;
        }

        span {
          font-weight: 400;
          font-size: 16px;
          color: #e9d484;
          margin-left: 7px;
        }
      }
    }
  }
}

::v-deep .el-carousel__indicators {
  display: none !important;
}
</style>
